{extend name="common/base" }

{block name="style"}
<style type="text/css">
.ace_editor{
	min-height: 20rem;
}
.nd-file-area{
	width:100%;
	border: 2px dashed #0e90d2;
	text-align: center;
	line-height: 20rem;
}
.am-titlebar{
	margin: 5px;
}
</style>
{/block}

{block name="content"}
<div class="am-g">
	<div class="am-u-sm-12">
		<form class="am-form" method="post">
		
			<div class="am-g am-margin-top-sm">
				<div class="am-u-sm-8 am-u-md-8 am-u-sm-offset-1 am-u-end">
					<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" >
					    <h2 class="am-titlebar-title ">
					        额外配置
					    </h2>
					</div>
				</div>
			</div>
			<div class="am-g am-margin-none">
				<div class="am-u-sm-8 am-u-md-8 am-u-sm-offset-1 am-u-end">
					<textarea class="nd-editor-json am-hide" nd-target="nd-editor-ace-upload" name="upload_option" id="upload_option" rows="5" >{"width":"1920","height":"1080"}</textarea>
				</div>
			</div>
			
			<div class="am-g am-margin-none">
				<div class="am-u-sm-8 am-u-md-8 am-u-sm-offset-1 am-u-end">
					<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" >
					    <h2 class="am-titlebar-title ">
					        选择文件 <span id="upload_result"></span>
					    </h2>
					</div>
				</div>
			</div>
			<div class="am-g am-margin-top-sm">
				<div class="am-u-sm-8 am-u-md-8 am-u-sm-offset-1 am-u-end">
					<div class="nd-file-area">
						<div class="am-form-group am-form-file">
							<button type="button" class="am-btn am-btn-secondary am-btn-sm">
								<i class="am-icon-cloud-upload"></i>
								&nbsp;&nbsp;
								选择要上传的文件
							</button>
							<input type="file" name="upload_file" id="upload_file">
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
$(function(){
	$('#upload_file').on('change', function(){
		var uploadOption = $('#upload_option').val(),
			uploadFile = $(this).get(0).files[0];
		
		if(typeof uploadFile == 'undefined'){
			return false;
		}
		
		var formData = new FormData();
		formData.append('upload_option', uploadOption);
		formData.append('upload_file', uploadFile);
		var ajaxOption = {
			url 	: CMS.api.upload,
			type	: 'post',
			data	: formData,
			dataType: 'json',
			timeout	: 0,
			processData : false,
			contentType : false,
			xhr : function(){
				var xhr = $.ajaxSettings.xhr();
				xhr.upload.onprogress = function(event){
					var percent = 0, position = event.loaded || event.position, total = event.total;
					if (event.lengthComputable) {
						percent = position / total * 100;
					}
					if(percent > 100){
						percent = 100;
					}
					$.AMUI.progress.set(percent);
					$('#upload_result').html('<span class="am-text-warning">[上传进度：'+percent+'%]</span>');
				};
				return xhr;
			},
			success	: function(res){
				$.AMUI.progress.done();
				if(res.code == 1){
					$('#upload_result').html('<span class="am-text-danger">['+res.data.url+']</span>');
				}
				else{
					$('#upload_result').html('<span class="am-text-danger">['+res.msg+']</span>');
				}
			},
			error : function(xhr){
				$.AMUI.progress.done();
				$('#upload_result').html('<span class="am-text-danger">[网络链接错误]</span>');
			}
		};
		$.ajax(ajaxOption);
	});
});
</script>
{/block}